<template>
	<swiper class="pagination" circular :current="swiperCur" id="paginationScrolling" :style="{ height: height + 'px' }" @change="swiperChange">
		<swiper-item v-for="(i, index) in tabList" class="item" :style="{ height: height + 'px' }">
			<scroll-view
				:refresher-enabled="refresher"
				:refresher-triggered="refresher"
				class="scroll"
				scroll-y="true"
				:style="{ height: height + 'px' }"
				@scrolltoupper="scrolltoupper"
				@scrolltolower="scrolltolower">
				<slot :name="'scrollList' + index"></slot>
			</scroll-view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: 'paginationScrolling',
		props: {
			tabList: {
				type: [Array,Object],
				default: () => [],
			},

			swiperCur: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				height: 400,
				refresher: false,
			};
		},
		beforeCreate() {},
		mounted() {
			// 计算可用区域
			this.init();
		},
		methods: {
			refStart() {
				this.refresher = true;
			},
			refFinish() {
				this.refresher = false;
			},
			scrolltolower() {
				this.$emit('scrolltolower');
			},
			scrolltoupper() {
				this.$emit('scrolltoupper');
			},
			swiperChange({ detail }) {
				if (detail.source === 'touch') {
					this.$emit('tabChange', { item: this.tabList[detail.current], index: detail.current });
				}
				return;
			},
			init() {
				uni.getSystemInfo({
					success: (res) => {
						let view = uni.createSelectorQuery().in(this).select('#paginationScrolling');
						view.boundingClientRect((data) => {
							this.height = res.safeArea.bottom - data.top - res.windowTop;
						}).exec();
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pagination {
		width: 100%;
		.item {
			width: 100%;
			.scroll {
				width: 100%;
			}
		}
	}
</style>
